<template>
    <div class="upgrade">
      <!--<div class="up_img"><img src="../../assets/images/p-1.png" alt=""></div>-->
      <!--<div class="up_text">我爱喝酒</div>-->
      <div style="height: 10px;"></div>
      <div class="up_input" >
        <div class="left">类型</div>
        <div class="right">

          <select  v-model="autoClass" >
            <option value="2">专业侍酒师</option>
            <option value="3">银牌经销商</option>
            <option value="4">金牌经销商</option>
            <!--<option value="1">区域代理</option>-->
          </select>
        </div>
      </div>
      <!--<div class="box_notes">-->
        <!--*您目前等级为银牌会员-->
      <!--</div>-->
      <!--<ul class="ul-box">-->
        <!--&lt;!&ndash;<li><span>姓名</span><input type="text" placeholder="请输入你的真实姓名" v-model="username"></li>&ndash;&gt;-->
        <!--&lt;!&ndash;<li><span>身份证号码</span><input type="text" placeholder="请输入真实号码" v-model="idCard"></li>&ndash;&gt;-->
        <!--<li v-if="!haveSuperior"><span>推荐人号码</span><input type="tel" placeholder="请输入推荐人手机号码" v-model="referee" ></li>-->
        <!--<li v-if="haveSuperior" ><span>推荐人号码</span><input type="tel" placeholder="请输入推荐人手机号码" v-model="referee" readonly></li>-->
      <!--</ul>-->
      <div class="box_btn">
        <input type="button" value="提交" @click="confirmBtn()">
      </div>
    </div>
</template>

<script>
  import global from '../public/global.vue'
    export default {
        name: "upgrade",
      data() {
        return {
          autoClass:2,
          username:'',
          idCard:'',
          referee:'',
        }
      },
      methods:{

        //确定
        confirmBtn(){
          let self=this;
          let params = new URLSearchParams();
          params.append("username",self.username);
          params.append("idCard",self.idCard);
          params.append("referee",self.referee);
          params.append("autoClass",self.autoClass);
          self.$http({
            url: global.apiUrl + '/agent/ApplyAgent',
            method: 'post',
            data:  params,
          }).then(res => {
            alert(res.data.msg)
            if(res.data.code==0){
              setTimeout(function () {
                self.$router.go(-1)
              }, 1000 )
            }

          })
        },
      },
      created: function () {
        document.title = "升级";
      }
    }
</script>

<style lang="less" scoped>
  select{
    -webkit-appearance: none;
    width:50%;
    line-height: 40px;
    border:none;
    outline:none;
    background: transparent;
    font-size: 0.9rem;
    /*margin-top:8px;*/
    background: url('../../assets/images/pull_down.png') no-repeat 100% 12px;
    background-size: auto 20px;
  }
  .upgrade{
    width: 95%;
    min-height: 80px;
    margin: 20px auto;
    text-align: center;
    .up_img img{
      width: 100px;
      height: 100px;
      border-radius: 50px;
    }
    .up_input{
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #E7E7E7;
      margin-top: 30px;
      .left{
        width: 25%;
        height: 40px;
        float: left;
        line-height: 40px;
        color: #a7a5a5;
        font-size: 0.9rem;
      }
      .right{
        width: 75%;
        height: 40px;
        float: left;
      }
      .right>input{
        width: 95%;
        height: 38px;
        border: none;
        text-align: center;
        font-size: 1rem;
        outline: none;
      }
    }
    .box_notes{
      width: 95%;
      margin: 10px auto;
      font-size: 0.7rem;
      color: #e2dfdf;
      text-align: left;
    }
    .box_btn{
      width: 92%;
      margin: 20px auto;
    }
    .box_btn>input{
      width: 100%;
      height: 35px;
      background: #D53F40;
      outline: none;
      border: none;
      color: #FFF;
      font-size: 1rem;
      border-radius: 6px;
      letter-spacing: 5px;
    }
    .ul-box{
      width:100%;
      li{
        width:100%;
        padding:3% 0;
        border-bottom:1px dashed #eee;
        text-align: left;
        font-size: 0.9rem;
        color:#666;
        span{
          display: inline-block;
          width:30%;
          white-space:nowrap;
          vertical-align: middle;
        }
        input{
          -webkit-appearance: none;
          width:70%;
          border:none;
          outline:none;
          vertical-align: middle;
        }
      }
    }
  }
</style>
